<template>
  <div>
    <Table :columns="columns"
           :showPagination="true"
           :dataSource="usersData"
           :fetch="loadUsersList"
           :options="usersOptions"
           @pageNoChange="handlePageNoChange"
           class="userTable">
      <template #avatar="{row}">
        <el-avatar :size="80">
          <img :src="row.image" />
        </el-avatar>
      </template>
      <template #opration="{row}">
        <div class="opration">
          <el-row type="flex" justify="space-between" align="middle">
            <a href="javascript:void(0)"
               class="freeze-link"
               @click="freeze(row)"
               color="red"
               v-if="row.valid">冻结</a>
            <a href="javascript:void(0)"
               class="a-link"
               @click="revert(row)"
               v-else>解冻</a>
              <el-divider direction="vertical" />
              <a href="javascript:void(0)"
                class="set-link"
                @click="setManager(row)"
                v-if="this.userIdentify === '超级管理员'">设为管理员</a>
              <span v-else>--</span>
          </el-row>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
import { columns } from 'element-plus/es/components/table-v2/src/common.mjs';
import { getCurrentInstance, nextTick } from 'vue';


export default {
  data(){
    return{
      currentPage:1,
      userIdentify:'',
      proxy: getCurrentInstance().proxy,
      columns:[{
        label: "用户头像",
        prop: "image",
        scopedSlots:"avatar"
      },
      {
        label: "用户名称",
        prop: "username"
      },
      {
        label: "操作",
        prop: "opration",
        width:300,
        scopedSlots: "opration",
      }],
      usersData: {
        list :[]
      },
      usersOptions: {
        border:true,
        extHeight:10,
      },
    };
  },
  methods: {
    //加载表单数据
    async loadUsersList(){
      try {
        let result = await this.proxy.Request({
          url: "/users",
          method: "GET",
          params:{
            page:this.currentPage
          }
        });

        if (!result){
          return;
        }
        this.usersData.list = result.data.rows;
      } catch(error){
        console.error("获取用户数据时出错：",error)
      }
    },

    //冻结该用户
    async freeze(data){
        this.proxy.Confirm('你确定要冻结'+data.username+'吗？', async() => {
        let result = await this.proxy.Request({
          url: "/users/freeze/"+data.id,
          method: "PUT",
          params: {
            id: data.id,
          }
        })
        this.loadUsersList();
        })
    },

    async revert(data){
        this.proxy.Confirm('你确定要解冻'+data.username+'吗？', async() => {
        let result = await this.proxy.Request({
          url: '/users/revert/'+data.id,
          method: "PUT",
          params: {
            id: data.id,
          }
        })
        this.loadUsersList();
        })
    },

    //设为管理员
    async setManager(data) {
      this.proxy.Confirm('你确定要设置该用户为管理员吗?', async() => {
        let result = await this.proxy.Request({
          url: '/admin/insert?id='+data.id,
          method: "POST",
          params: {
            id: data.id,
          }
        })
        if (!result) {
          return;
        }
        this.loadUsersList();
      })
    },

    
    //页面跳转
    handlePageNoChange(pageNo) {
      this.currentPage = pageNo;
      this.loadUsersList();
    },
  },
  mounted(){
    this.loadUsersList();
    var userInfo = eval("("+localStorage.userInfo+")");
    console.log(typeof(useridentity))
    console.log(typeof(localStorage.userInfo))
    console.log(userInfo.loginUserInfo.identity)
    this.userIdentify =  userInfo.loginUserInfo.identity
    console.log(this.userIdentify)
  },
};
</script>

<style scoped>
.freeze-link{
  color: red;
  text-decoration: none;
}
.set-link{
  color: green;
  text-decoration: none;
}
</style>